<!-- 编辑弹窗 -->
<template>
  <!-- 高级弹窗modal -->
  <ele-modal
    form
    :width="800"
    v-model="visible"
    :title="isInfo ? '详情' : isUpdate ? '修改' : '添加'"
    @open="handleOpen"
  >
    <el-form
      ref="formRef"
      :model="form"
      label-width="100px"
      :disabled="isInfo"
      @submit.prevent=""
    >
      <el-tabs type="border-card">
        <el-tab-pane label="巡检结果">
          <el-row :gutter="10">
            <el-col :span="24">
              <div class="title-container">
                <div class="left">
                  <p>采集信息</p>
                  <div class="title-icons">
                    <img src="@/assets/bs.png" alt="" />
                    <img src="@/assets/yj.png" alt="" />
                    <img src="@/assets/hb.png" alt="" />
                    <img src="@/assets/bf.png" alt="" />
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <el-form-item label="采样结果" prop="algorithmName">
                <el-input
                  clearable
                  v-model="form.algorithmName"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="采样时间" prop="startTime">
                <el-date-picker
                  v-model="form.startTime"
                  type="date"
                  placeholder="采样时间"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="照片/视频" prop="cover">
                <el-upload
                  disabled
                  class="avatar-uploader"
                  action=""
                  :show-file-list="false"
                >
                  <img v-if="form.cover" :src="form.cover" class="avatar" />
                  <el-icon v-else class="avatar-uploader-icon"
                    ><Plus
                  /></el-icon>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div class="title-container">
                <div class="left">
                  <p>审核信息</p>
                </div>
                <div class="right">
                  <div class="btn-primary" @click="dataChangeLog">数据变更日志</div>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <el-form-item label="识别结果" prop="algorithmName">
                <el-input
                  clearable
                  v-model="form.algorithmName"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="告警级别" prop="algorithmName">
                <el-input
                  clearable
                  v-model="form.algorithmName"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处理人" prop="algorithmName">
                <el-input
                  clearable
                  v-model="form.algorithmName"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="处理时间" prop="startTime">
                <el-date-picker
                  v-model="form.startTime"
                  type="date"
                  placeholder="处理时间"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="处理说明" prop="algorithmName">
                <el-input
                  type="textarea"
                  clearable
                  v-model="form.algorithmName"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="巡检任务">
          <el-row :gutter="10">
            <el-col :span="24">
              <div class="title-container">
                <div class="left">
                  <p>巡检任务</p>
                  <div class="title-icons"><img src="@/assets/hsyj.png" alt=""></div>
                </div>
              </div>
            </el-col>
            <el-col :span="6">
              <el-form-item label="任务模式">
                <el-tag class="mx-1" type="warning" effect="plain"> - </el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="任务来源">
                <el-tag class="mx-1" type="danger" effect="plain"> - </el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="任务数量">
                <el-tag class="mx-1" type="success" effect="plain">
                  0/0/0
                </el-tag>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="">
                <a href="javascript:;">已审核</a>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="线路名称" prop="algorithmName">
                <el-input
                  clearable
                  v-model="form.algorithmName"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="巡检类型" prop="startTime">
                <el-input
                  clearable
                  v-model="form.startTime"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属部门" prop="algorithmName">
                <el-input
                  clearable
                  v-model="form.algorithmName"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="巡检区域" prop="startTime">
                <el-input
                  clearable
                  v-model="form.startTime"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div class="title-container">
                <div class="left">
                  <p>巡检计划</p>
                </div>
              </div>
            </el-col>

            <el-col :span="8">
              <el-form-item label="计划开始时间" prop="startTime">
                <el-date-picker
                  v-model="form.startTime"
                  type="date"
                  placeholder="请选择"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="计划结束时间" prop="startTime">
                <el-date-picker
                  v-model="form.startTime"
                  type="date"
                  placeholder="请选择"
                  size="small"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="计划执行对象" prop="input1">
                <el-input v-model="form.input1" placeholder="请选择">
                  <template #prepend>
                    <el-icon><UserFilled /></el-icon
                  ></template>
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="执行开始时间" prop="startTime">
                <el-date-picker
                  v-model="form.startTime"
                  type="date"
                  placeholder="请选择"
                  size="small"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="任务下载时间" prop="startTime">
                <el-date-picker
                  v-model="form.startTime"
                  type="date"
                  placeholder="请选择"
                  size="small"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="下载执行对象" prop="input2">
                <el-input v-model="form.input2" placeholder="请选择">
                  <template #prepend>
                    <el-icon><UserFilled /></el-icon
                  ></template>
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="任务上传时间" prop="startTime">
                <el-date-picker
                  v-model="form.startTime"
                  type="date"
                  placeholder="请选择"
                  size="small"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="执行结束时间" prop="startTime">
                <el-date-picker
                  v-model="form.startTime"
                  type="date"
                  placeholder="请选择"
                  size="small"
                />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="上传执行对象" prop="input3">
                <el-input v-model="form.input3" placeholder="请选择">
                  <template #prepend>
                    <el-icon><UserFilled /></el-icon
                  ></template>
                </el-input>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <div class="title-container">
                <div class="left">
                  <p>审核信息</p>
                </div>
              </div>
            </el-col>

            <el-col :span="8">
              <el-form-item label="审核人" prop="algorithmName">
                <el-input
                  clearable
                  v-model="form.algorithmName"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核时间" prop="startTime">
                <el-date-picker
                  v-model="form.startTime"
                  type="date"
                  placeholder="请选择"
                  size="small"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="审核评价" prop="startTime">
                <a href="javascript:;">优秀</a>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="审核说明" prop="algorithmName">
                <el-input
                  type="textarea"
                  clearable
                  v-model="form.algorithmName"
                  placeholder="请输入"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div class="audit_message">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <el-form-item label="添加时间" prop="auditResult">
                      2022-05-05 09:09:09
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="添加用户" prop="auditResult">
                      张三
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="最后修改时间" prop="auditResult">
                      2022-05-05 09:09:09
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="修改用户" prop="auditResult">
                      admin
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
    </template>
    <!-- 数据变更日志弹窗 -->
     <my-log v-model="showLog" :isInfo="true"/>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, nextTick } from 'vue';
  import { EleMessage, emailReg, phoneReg } from 'ele-admin-plus/es';
  import { useFormData } from '@/utils/use-form-data';
  import { addDept, updateDept } from '@/api/system/dept';
  import { Plus, UserFilled } from '@element-plus/icons-vue';
  import MyLog from './mt-log.vue'
  const props = defineProps({
    /** 修改回显的数据 */
    data: Object,
    /** 上级台账id */
    parentId: Number,
    isInfo: Boolean
  });

  const emit = defineEmits(['done']);

  /** 弹窗是否打开 */
  const visible = defineModel({ type: Boolean });

  /** 是否是修改 */
  const isUpdate = ref(false);

  /** 提交状态 */
  const loading = ref(false);

  /** 表单实例 */
  const formRef = ref(null);

  /** 表单数据 */
  const [form, resetFields, assignFields] = useFormData({});

  /** 关闭弹窗 */
  const handleCancel = () => {
    visible.value = false;
  };

  const showLog = ref(false)

  /** 保存编辑 */
  const save = () => {
    formRef.value?.validate?.((valid) => {
      if (!valid) {
        return;
      }
      loading.value = true;
      const saveOrUpdate = isUpdate.value ? updateDept : addDept;
      saveOrUpdate({ ...form, parentId: form.parentId || 0 })
        .then((msg) => {
          loading.value = false;
          EleMessage.success(msg);
          handleCancel();
          emit('done');
        })
        .catch((e) => {
          loading.value = false;
          EleMessage.error(e.message);
        });
    });
  };

  /** 弹窗打开事件 */
  const handleOpen = () => {
    if (props.data) {
      assignFields({
        ...props.data,
        parentId: props.data.parentId || void 0
      });
      isUpdate.value = true;
    } else {
      resetFields();
      form.parentId = props.parentId;
      isUpdate.value = false;
    }
    nextTick(() => {
      nextTick(() => {
        formRef.value?.clearValidate?.();
      });
    });
  };

  /** 点击数据变更日志按钮 */
  const dataChangeLog = () => {
    showLog.value = true;
  }
</script>
<style lang="scss" scoped>
  :deep(.el-dialog) {
    width: 600px;
  }
</style>
<style scoped>
  .avatar-uploader .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }
</style>

<style>
  .avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    text-align: center;
  }

  div.title-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
      p {
        line-height: 1.2;
        padding-left: 10px;
        border-left: 3px solid var(--el-color-primary);
      }

      div.title-icons {
        margin-left: 10px;
        img {
          width: 20px;
          margin-left: 10px;
        }
      }
    }
    .right {
      .btn-primary {
        text-align: center;
        background-color: var(--el-color-primary);
        color: #fff;
        padding: 5px 10px;
        font-size: 12px;
        border-radius: 5px;
        cursor: pointer;
      }
    }
  }
  .audit_message {
    background: #f1f1f1;
    padding: 10px;
  }
</style>
